import { useRef, useState } from 'react';
import { Button, Divider, message, Tooltip } from 'antd';
import { CopyOutlined, DislikeOutlined, LikeOutlined, RedoOutlined } from '@ant-design/icons';
import applicationApi from '@/api/application';
import { useParams } from 'react-router-dom';

const ChatInteraction = (props) => {
    const {
        data,
        applicationId,
        chatId,
        chat_loading,
        log,
        tts,
        tts_type,
        onUpdateData,
        onRegeneration
    } = props;

    const audioPlayer = useRef<HTMLAudioElement | null>(null);
    const [buttonData, setButtonData] = useState(data);
    const [loading, setLoading] = useState(false);
    const { id } = useParams();

    const handleRegeneration = () => {
        onRegeneration();
    };

    const copyClick = (text: string) => {
        navigator.clipboard.writeText(text).then(() => {
          // 显示复制成功的提示
          message.success('复制成功！');
        }).catch((error) => {
          console.error(error)
          message.error('复制失败：');
        });
      }

    const handleVote = (val: string) => {
        setLoading(true);
        applicationApi
            .putChatVote(applicationId, chatId, data.record_id, val, loading)
            .then(() => {
                const newButtonData = { ...buttonData, vote_status: val };
                setButtonData(newButtonData);
                onUpdateData(newButtonData);
            })
            .finally(() => {
                setLoading(false);
            });
    };

    return (
        <div>
            {applicationId && (
                <div>
                    <Tooltip title="换个答案" placement="top">
                        <Button type="text" disabled={chat_loading} onClick={handleRegeneration}>
                            <RedoOutlined />
                        </Button>
                    </Tooltip>
                    <Divider type="vertical" />
                    <Tooltip title="复制" placement="top">
                        <Button type="text" onClick={() => copyClick(data?.answer_text)}>
                            <CopyOutlined />
                        </Button>
                    </Tooltip>
                    <Divider type="vertical" />
                    {buttonData.vote_status === '-1' && (
                        <Tooltip title="赞同" placement="top">
                            <Button type="text" disabled={loading} onClick={() => handleVote('0')}>
                                <LikeOutlined />
                            </Button>
                        </Tooltip>
                    )}
                    {buttonData.vote_status === '0' && (
                        <Tooltip title="取消赞同" placement="top">
                        <Button type="text" disabled={loading} onClick={() => handleVote('-1')}>
                          <LikeOutlined twoToneColor="rgb(255, 198, 10)"/>
                        </Button>
                      </Tooltip>
                    )}
                    {buttonData.vote_status === '-1' && (
                        <Tooltip title="反对" placement="top">
                        <Button type="text" disabled={loading} onClick={() => handleVote('1')}>
                          <DislikeOutlined />
                        </Button>
                      </Tooltip>
                    )}
                    {buttonData.vote_status === '1' && (
                        <Tooltip title="取消反对" placement="top">
                        <Button type="text" disabled={loading} onClick={() => handleVote('-1')}>
                          <DislikeOutlined twoToneColor="rgb(255, 198, 10)"/>
                        </Button>
                      </Tooltip>
                    )}
                </div>
            )}
            <audio ref={audioPlayer} controls hidden />
        </div>
    );
};

export default ChatInteraction;